<template>
    <div class="wrap" v-if="show">
        <div class="modal">
            <image v-if="type === '0'" class="image-icon" :src="imgPath('modal_error.png')"/>
            <image v-if="type === '1'" class="image-icon" :src="imgPath('modal_success.png')" />
            <text class="tip" :class="[type === '0' ? 'col_ff0f37' : 'col_fff']">{{word}}</text>
        </div>
    </div>
</template>
<script>
export default {
  name: 'modal',
  props: ['show', 'type', 'word'],
  data () {
    return {}
  }
}
</script>
<style scoped>
    .col_ff0f37 {
        color: #ff0f37;
    }
    .col_fff {
        color: #fff;
    }
    .wrap {
        flex-direction: row;
        justify-content: center;
        position: fixed;
        top: 170px;
        left: 0;
        right: 0;
    }
    .modal {
        /*height: 76px;*/
        padding-left: 58px;
        padding-right: 58px;
        border-radius: 10px;
        flex-direction: row;
        justify-content: center;
        /*line-height: 76px;*/
        align-items: center;
        background-color: rgba(43, 48, 64, 0.3);
    }
    .image-icon {
        width: 56px;
        height: 56px;
        margin-right: 16px;
        border-radius: 28px;
    }
    .tip {
        /*color: #ff0f37;*/
        font-size: 30px;
        line-height: 76px;
    }
</style>
